<template>
	<view>
		<view class="top-Img">
			<image src="../../static/image/bjtp.jpg" mode="" :lazy-load="true" mode="widthFix"></image>
		</view>
		<view class="nav-list" style="margin-top: 15px">
			<view
				class="nav-li"
				:class="'bg-' + item.color"
				:style="[{ animation: 'show ' + ((index + 1) * 0.2 + 1) + 's 1' }]"
				v-for="(item, index) in indexList"
				:key="index"
				@click="gridClick(item)"
			>
				<view class="nav-title">{{ item.title }}</view>
				<view class="nav-name">{{ item.value }}</view>
				<text :class="'iconfont ' + item.icon"></text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			indexList: [
				{ title: '其他', url: '', value: 'rests', color: 'cyan', icon: 'icon-fayan' },
				{ title: '记录', url: '/pages/index/record', value: 'record', color: 'olive', icon: 'icon-mofabang' },
				{ title: '图片', url: '', value: 'Image', color: 'blue', icon: 'icon-hualang' },
				{ title: '工具', url: '/pagesToolPage/index', value: 'tool', color: 'purple', icon: 'icon-baxin' },
				{ title: '登录', url: '/pagesFstorch/login', value: 'fstorch', color: 'brown', icon: 'icon-yidongshezhi' },
				{ title: '水印相机', url: '/pages/index/watermarkCamera', value: 'watermarkCamera', color: 'mauve', icon: 'icon-diannaoshezhi' },
				{ title: '录音测试', url: '/pages/index/recording', value: 'recording', color: 'pink', icon: 'icon-mubiao' },
				{ title: '手持弹幕', url: '/pages/index/handBarrage', value: 'handBarrage', color: 'lblue', icon: 'icon-VRtupian' }
			]
		};
	},
	mounted() {},
	methods: {
		gridClick(item) {
			if (item.url.indexOf('pages') != -1) {
				//在起始页面跳转到test.vue页面并传递参数
				uni.navigateTo({
					url: item.url
				});
			}
		}
	}
};
</script>

<style lang="less" scoped>
.top-Img {
	width: 100%;

	image {
		width: 100%;
	}
}

.gridItem {
	text-align: center;
	align-items: center;
}
</style>
